<script setup lang="ts">
import { ref } from 'vue';


const value = ref('')

const options = [
    {
        value: 'Option1',
        label: 'Option1',
    },
    {
        value: 'Option2',
        label: 'Option2',
    }

]
</script>

<template>
    <div>
        <header>
            <div class="banner">
                <span>加入收藏</span> <span>|</span><span>设为首页</span>
            </div>
        </header>
        <div class="banner nav">
            <img src="../assets/logo-nav.png" alt="">
            <div>
                <router-link to="/Index/HomeView">首页</router-link>
                <router-link to="/Index/OverView">集团概况</router-link>
                <router-link to="/Index/NewsView">新闻动态</router-link>
                <router-link to="/Index/BusinessView">业务体系</router-link>
                <router-link to="/Index/FdiView">招商引资</router-link>
                <router-link to="/Index/PartybuildView">党建专栏</router-link>
                <router-link to="/Index/CorporateView">企业文化</router-link>
                <router-link to="/Index/HumanresourcesView">人力资源</router-link>
                <router-link to="/Index/ContactView">联系方式</router-link>

            </div>

        </div>
        <router-view></router-view>
        <div class="footer">
            <div class="banner footer-nav">
                <div class="left">
                    <img class="logo" src="../assets/logo.png" alt="">
                    <p>电话:0931-8888888</p>
                    <p>地址:甘肃省兰州市兰州新区绿色金融大厦</p>
                    <p>纪检邮箱:jkjjjcs@163.com</p>
                    <img class="rwm" src="../assets/ewm.jpg" alt="">
                </div>
                <div class="right">
                    <div class="list">
                        <dl>
                            <dt>集团概况</dt>
                            <dd>集团简介</dd>
                            <dd>集团荣誉</dd>
                            <dd>组织机构</dd>
                        </dl>
                        <dl>
                            <dt>集团概况</dt>
                            <dd>集团简介</dd>
                            <dd>集团荣誉</dd>
                            <dd>组织机构</dd>
                        </dl>
                        <dl>
                            <dt>集团概况</dt>
                            <dd>集团简介</dd>
                            <dd>集团荣誉</dd>
                            <dd>组织机构</dd>
                        </dl>
                        <dl>
                            <dt>集团概况</dt>
                            <dd>集团简介</dd>
                            <dd>集团荣誉</dd>
                            <dd>组织机构</dd>
                            <dd>集团简介</dd>
                            <dd>集团荣誉</dd>

                            <dd>组织机构</dd>
                        </dl>
                        <dl>
                            <dt>集团概况</dt>
                            <dd>集团简介</dd>
                            <dd>集团荣誉</dd>
                            <dd>组织机构</dd>
                        </dl>
                        <dl>
                            <dt>集团概况</dt>
                            <dd>集团简介</dd>
                            <dd>集团荣誉</dd>
                            <dd>组织机构</dd>
                        </dl>
                        <dl>
                            <dt>集团概况</dt>
                            <dd>集团简介</dd>
                            <dd>集团荣誉</dd>
                            <dd>组织机构</dd>
                        </dl>
                        <dl>
                            <dt>集团概况</dt>
                            <dd>集团简介</dd>
                            <dd>集团荣誉</dd>
                            <dd>组织机构</dd>
                        </dl>
                    </div>
                    <div class="about">
                        <span class="link">相关链接:</span>
                        <el-select popper-append-to-body="false" v-model="value" class="m-2" placeholder="───行业相关网站───"
                            suffix-icon="CaretBottom">
                            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
                        </el-select>
                        <el-select v-model="value" class="m-2" placeholder="───省厅局───" suffix-icon="CaretBottom">
                            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
                        </el-select>
                        <el-select v-model="value" class="m-2" placeholder="───友情链接───" suffix-icon="CaretBottom">
                            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
                        </el-select>
                    </div>
                    <p>Copyright©&nbsp; 2018 &nbsp;兰州新区金融投资控股集团有限公司&nbsp;&nbsp; 陇ICP备16015484号-2&nbsp;&nbsp;&nbsp;
                        <img src="../assets/jh.png" alt="">公安网备 42010302002462号
                    </p>
                </div>
            </div>
        </div>
    </div>
</template>

<style lang="scss">
header {
    width: 100%;
    height: 25px;
    background: #033c73;
}

.banner {
    width: 1400px;
    margin: 0 auto;
    // height: 100%;
    // background: aqua;
}

.nav {
    height: 100px;
    display: flex;
    justify-content: space-between;

    text-align: center;
    color: #033c73;



    a {
        padding: 0px 21px;

        line-height: 100px;
        font-weight: 400;


    }

    img {
        width: 265px;
        height: 76px;
        margin: 12px 21px;
    }


}

.router-link {
    color: #033b73;
    // color: red;
}

.router-link-active {
    color: #bea375;
}

// p {

header span {
    display: inline-block;
    font-size: 14px;
    float: right;
    padding: 0px 10px;
    color: white;
}

// }
.footer {
    height: 410px;
    background-color: #033c73;

    .footer-nav {
        height: 100%;
        display: flex;

        // margin-left: 32px;
        justify-content: space-between;

        .left {
            width: 340px;
            height: 100%;
            box-sizing: border-box;
            padding-left: 32px;
            // background-color: #bea375;

            .logo {

                margin-top: 27px;
                margin-bottom: 15px;
            }

            .rwm {
                margin-top: 30px;
            }

            p {
                letter-spacing: 1px;
                line-height: 35px;
                font-size: 12px;
                color: white;
            }

        }

        .right {
            width: 1060px;
            // background-color: yellow;

            .list {
                height: 300px;
                width: 1060px;
                display: flex;

                justify-content: space-around;
                color: white;
                // background-color: red;

                dl {

                    font-size: 14px;

                    dt {
                        margin-top: 20px;
                        font-weight: bold;
                        height: 38px;
                        line-height: 38px;
                    }

                    dd {
                        height: 26px;
                        line-height: 26px;
                    }
                }
            }

            .about {
                height: 40px;

                .el-input__wrapper {
                    // width: 500px;
                    // background: none;
                    color: red;
                    background-color: transparent !important;
                }

                .el-input__inner {
                    color: rgb(222, 225, 230);
                }

                // .el-select__popper.el-popper[role=tooltip] {
                //     background-color: transparent;
                // }

                :deep(.el-popper) {
                    background-color: transparent !important;
                }

                // :deep(.el-popper.is-light) {
                //     background-color: transparent !important;
                // }

                .link {
                    font-size: 15px;
                    display: inline-block;
                    margin: 0px 50px;
                    color: white;
                }




                // :deep(.el-select__caret) {
                //     width: 50px !important;
                //     height: 50px !important;
                // }

                // caretbottom {
                //     width: 10px;
                // }

                // :deep(.el-icon) {
                //     display: inline-block;
                //     size: 20px;
                // }

            }

            p {
                font-size: 15px;
                height: 40px;
                line-height: 40px;
                padding-left: 85px;
                color: white;

                img {
                    vertical-align: middle;
                    width: 17px;
                }
            }

            .about :nth-child(3) {
                margin: 0px 65px;
            }


        }


    }
}
</style>
